<template>
  <div class="ApplayFor">
    <div class='title'>
      <span></span>
      <span>建仓申请（RST）</span>
    </div>
    <div class='applayfor'>
      <div class="boxStyle">
        <div>建仓价格：</div>
        <input type="text" v-model="price" disabled></div>
      <div class="boxStyle">
        <div>普通建仓额度：</div>
        <input type="text" class="bdColor" v-model="limit" disabled></div>
      <!-- <div class="boxStyle">
        <div>交易量建仓额度：</div>
        <input type="text" class="bdColor" v-model="count" disabled></div> -->
      <!-- <div class="boxStyle">
        <div>选择账户：</div>
        <input type="text" value='普通量建仓帐户' disabled>
        <el-select class="chose" v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div> -->
      <div class="boxStyle">
        <div>选择建仓方式：</div>
        <el-select class="chose" v-model="value2" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="boxStyle" v-show='value2 == "选项2"'>
        <div>USDT数量：</div>
        <input type="number" @keydown='ismore' v-model="usdtCount" @mousewheel='disabledwheel($event)' placeholder="请输入USDT数量" @keyup='us' @blur='smallmoney'></div>
      <div class="boxStyle">
        <div>建仓金额：</div>
        <input type="number" @mousewheel='disabledwheel($event)' :value="usdtCount?((usdtCount*rate+'').includes('.') && (usdtCount*rate+'').split('.')[1].length>2?Number(usdtCount*rate).toFixed(2):usdtCount*rate):''" disabled v-if='value2 !== "选项1"' style="margin-right: 20px;" ref='jc'>
        <input type="number" @mousewheel='disabledwheel($event)' @keyup='ismore' placeholder="请输入建仓金额" v-if='value2 == "选项1"' style="margin-right: 20px;" ref='jc' @blur='smallmoney'>
      </div>

   
      <div class="boxStyle" style=' height: 18px;
    line-height: 18px;margin-top: 10px;'>
        <div></div>
        <!-- <span style='    color: #ffb001;
    font-size: 12px;
    display: inline-block;'> 注：每笔普通建仓金额不低于: 5000元；每笔交易量建仓不低于：1000元</span> -->
        <span style='    color: #ffb001;
    font-size: 12px;
    display: inline-block;'> {{tts || '注：每笔普通建仓金额不低于: 5000元'}}</span>

      </div>
         <div class="boxStyle" v-if='value2 == "选项2"'>
        <div>USDT地址：</div>
        <input type="text" :value="usdtadress" disabled></div>
      <div class="boxStyle" v-if='value2 == "选项2"'>

        <div>交易哈希值：</div>
        <input type="text" v-model="xiHaZhi"></div>
      <div class="boxStyle" v-if='value2 == "选项1"'>
        <div>*汇款人：</div>
        <input type="text" v-model="name"></div>
      <div class="boxStyle" v-if='value2 == "选项1"'>
        <div>*付款渠道：</div>
        <input type="text" v-model="qd"></div>
      <div class="boxStyle" v-if='value2 == "选项1"'>
        <div>卡号或账户：</div>
        <input type="text" v-model="zh"></div>
      <div class="boxStyle" v-if='value2 == "选项1"'>
        <div>收款卡号：</div>
        <input type="text" :value="bankNo" disabled></div>
      <div class="boxStyle">
        <div></div>
        <div>
          <p>
            <el-checkbox v-model="checked1" @change="changeone($event)"><span style='color:#606266'>本人已采用中国社区绑定的手机号码注册</span>
              <a href="http://bilur.exchange/" target="view_window" style='color: #409eff;'>交易所</a>
            </el-checkbox>
          </p>
        </div>
      </div>
      <div class="boxStyle">
        <div></div>
        <el-button class="colorStyle" type="warning" :plain="true" @click="onBtn">申请建仓</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import $ from "jquery";
export default {
  data() {
    return {
      isjc: false,
      usdtadress: "",
      price: "",
      limit: "",
      count: "",
      usdtCount: "",
      xiHaZhi: "",
      rate: "",
      receiveDetail: "",
      bankNo: "",
      name: "",
      qd: "",
      zh: "",
      rstType: "",
      tts: "",
      options: [
        {
          value: "选项1",
          label: "普通量建仓帐户",
          id: 0
        }
        // {
        //   value: "选项2",
        //   label: "交易量建仓帐户",
        //   id: 1
        // }
      ],
      options2: [
        {
          value: "选项1",
          label: "人民币",
          id: 1,
          rate: ""
        },
        {
          value: "选项2",
          label: "USDT建仓",
          id: 2,
          rate: ""
        }
      ],
      value: "",
      value2: ""
    };
  },
  mounted() {},
  created() {
    u.checkerdu({ name: "rst" }, data => {
      if (data && data.code == "200") {
        this.price = data.data.rstPrice;
        this.limit = data.data.amount;
        this.count = data.data.amount;
        this.options2[0].rate = data.data.list[0].rate;
        this.options2[1].rate = data.data.list[1].rate;
        this.bankNo = data.data.bankNo;
        this.receiveDetail = data.data.receiveDetail;
        this.rstType = data.data.rstType;
        this.usdtadress = data.data.usdtAddress;
      }
    });
  },
  watch: {
    value2(newVa) {
      this.options2.some(item => {
        item.value == newVa ? (this.rate = Number(item.rate)) : "";
      });
      this.$refs.jc.value = "";
      this.usdtCount = "";
    }
  },
  methods: {
    changeone(e) {
      this.isjc = e;
    },
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    smallmoney() {
      Number(this.$refs.jc.value) < 5000
        ? Message({
            message: "每笔普通建仓金额不低于: 5000元",
            type: "error"
          })
        : "";
    },
    us() {
      this.usdtCount.includes(".") && this.usdtCount.split(".")[1].length > 2
        ? (this.usdtCount = Number(this.usdtCount).toFixed(2))
        : "";
      this.ismore();
    },
    ismore() {
      if (Number(this.$refs.jc.value) > 60000) {
        this.tts = "建仓金额超过建仓余额";
      } else {
        this.tts = "";
      }
    },
    onBtn() {
      let usdtCount = this.$refs.jc.value.trim();
      let xiHaZhi = this.xiHaZhi.trim();
      let name = this.name.trim();
      let qd = this.qd.trim();
      let zh = this.zh.trim();
      let reg = /^[0-9]+.?[0-9]*$/;
      let [pType, total, type] = [, , 0];

      // this.options.some(item => {
      //   item.value == this.value ? (type = item.id) : "";
      // });
      this.options2.some(item => {
        item.value == this.value2 ? (pType = item.id) : "";
      });
      // console.log([usdtCount,xiHaZhi,name,qd,zh])
      if (
        (pType == 1 && name === "") ||
        (pType == 1 && qd === "") ||
        (pType == 1 && zh === "") ||
        usdtCount === "" ||
        (pType == 2 && xiHaZhi === "") ||
        !reg.test(usdtCount) ||
        (!pType && pType !== 0) ||
        parseInt(usdtCount) <= 0
        // (!type && type !== 0)
      ) {
        return Message({
          message: "输入错误请重新填写",
          type: "error"
        });
      }
      usdtCount = Number(usdtCount);
      if (type == 0 && usdtCount < 5000) {
        return Message({
          message: "每笔普通建仓金额不低于: 5000元",
          type: "error"
        });
      }
      if (Number(this.limit) <= 0) {
        return Message({
          message: "建仓额度不足",
          type: "error"
        });
      }
      if (usdtCount > Number(this.limit)) {
        return Message({
          message: "建仓金额建超出剩余额度",
          type: "error"
        });
      }
      if (!this.isjc) {
        return Message({
          message: "请同意上述条款",
          type: "error"
        });
      }
      // else if (type == 1 && usdtCount < 1000) {
      //   return Message({
      //     message: "每笔交易量建仓金额不低于：1000元",
      //     type: "error"
      //   });
      // }
      u.goWarehouse(
        {
          pNum: pType == "2" ? Number(this.usdtCount).toFixed(2) : null,
          pType: parseInt(pType),
          sellHash: this.xiHaZhi,
          rstPrice: Number(this.price),
          total: usdtCount.toFixed(2),
          type: 0,
          receiveDetail: pType == 1?this.receiveDetail:'',
          remitter: name,
          channel: qd,
          bankNo: zh,
          rstNum: (usdtCount / Number(this.price)).toFixed(2),
          rstType: this.rstType,
          usdtAddress:pType == 2?this.usdtadress:''
          // trueTotal: pType == "1" ? usdtCount : ""
        },
        data => {
          if (data && data.code == "200") {
            Message({
              message: "申请成功",
              type: "success"
            });
            this.$router.push({ path: "/forward" });
          } else {
            Message({
              message: "申请失败",
              type: "error"
            });
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.ApplayFor {
  height: 100%;
  background: white;
  .applayfor {
    overflow-y: auto;
    height: calc(100% - 50px);
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
  }

  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .boxStyle {
    margin: 30px 0px 0px 30px;
    display: flex;
    height: 38px;
    line-height: 38px;
    div {
      // border: 1px solid #000;
      width: 165px;
      margin-bottom: 35px;
    }
    input {
      border: 1px solid #ccc;
      width: 338px;
      padding-left: 10px;
    }
    .bdColor {
      background-color: #eee;
    }
    .colorStyle {
      border: none;
      background-color: #ffb001;
      width: 115px;
      height: 38px;
      color: white;
      margin-bottom: 20px;
    }
    .chose {
      width: 338px;
    }
  }
}
.tip {
  margin-left: 195px;
  margin-top: 10px;
  font-size: 12px;
  color: #ffb001;
}
</style>
<style lang='less'>
.ApplayFor {
  .el-input__inner {
    border-radius: 0px;
    width: 424px;
  }
  input {
    width: 425px !important;
  }
  .el-input__suffix {
    right: -84px;
  }
  .el-select-dropdown{
     min-width: 424px !important;
  }
}
</style>
